import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import * as Util from '../../common/Util';

import {
  Input,
  Button
} from 'react-bootstrap';

import * as FindPwdActions from '../../actions/FindPwdActions';
import * as TicketActions from '../../actions/TicketActions';
import Ticket from '../../components/Ticket';
import Notify from '../../common/Notification';
import Container from '../../components/Container';

class FindPwdApp2 extends React.Component {

  constructor () {
    super();   
  }

  static propTypes = {
    dispatch: React.PropTypes.func.isRequired
  }

  handleSubmitClick() {

    let captcha = this.refs.captcha.getValue();
    if(!Util.captchaValidate(captcha)){
      Notify.makeNotify("验证码格式不正确");
      return;
    }

    let phone = this.props.findpwd.phone;

    this.props.ticketAction.validate(phone, captcha);
  }

  componentDidUpdate(){
    if (this.props.ticket) {
      let { validate_status = 0, message = "" } = this.props.ticket;
      if (validate_status === -1) {
          Notify.makeNotify(message);
      }else{
        this.props.history.pushState(null, "/FindPwd3");
      }
    }
  }

  renderTicketLink(){
    return(
      <Ticket phone={ this.props.findpwd.phone } progress={true} action={this.props.ticketAction}/>
    )
  }

  formatPhoneNum(phone){
    let result = "";
    if(Util.phoneValidate(phone)){
       result = phone.substring(0,3) + (new Array(5)).join("*") + phone.substring(7,11);
    }

    return result;
  }

  render() {

    let { findpwd } = this.props;

    return (
        <Container  
          isGoBack={true} 
          isFooter={false}
          isHeader={true} 
          isAuth = {false}
          headerTitle={"找回密码"}>
              <div id="account-panel">
                   <form className="form-horizontal">
                    <div className="text-center padding-lg">
                        <span>
                           验证码已短信发送至
                        </span>
                        <p className="lead text-primary">
                           { this.formatPhoneNum(findpwd.phone) }
                        </p>
                    </div>

                    <div className="form-element">
                      <Input type="tel" 
                        ref = "captcha"
                        defaultValue=""
                        placeholder = "请输入验证码" 
                        wrapperClassName="col-xs-12"
                        maxLength = "6"
                        addonAfter = {this.renderTicketLink()}
                        addonBefore="验证码"/>
                    </div>

                    <div className="text-center padding-left-lg padding-right-lg">
                      <Button bsStyle="primary" block onClick={this.handleSubmitClick.bind(this)}>下一步</Button>  
                    </div>
                  </form>
              </div>
        </Container>
    );
  }
}

export default connect(state => ({
    findpwd : state.findpwd,
    ticket : state.ticket
}), dispatch => ({
    findpwdAction: bindActionCreators(FindPwdActions, dispatch),
    ticketAction: bindActionCreators(TicketActions, dispatch)
}))(FindPwdApp2);


